import React, { useState, useEffect } from 'react'
import CitySelect from 'react-city-select'
import cityData from '../../../data/city'
import api from '../../../api'
import './style.less'

const CityLists = (props) => {

  const [ citysData, setCitysData ] = useState(cityData)

  function handleSelectCity(cityData) {
    // console.log(cityData);
    props.onEvent(cityData.name)
  }

  useEffect(() => {
    api.getCityLists().then(res => {
      // console.log(res);
      if(res.status === 200) {
        setCitysData(res.data.result.citylist)
      }
    }).catch(err => {
      console.log(err)
    })
  },[])

  return (
    <div className='citylists'>
      <h3>城市列表</h3>
      <CitySelect
        // 传入数据
        data = { citysData }
        // 传入回调
        onSelectItem = { handleSelectCity }
      >
      </CitySelect>
    </div>
  )
}

export default CityLists